<template>
	<el-dialog
	  title="新增"
	  :visible.sync="dialogVisible"
	  width="60%"
	  :append-to-body="true">	  
	    <div>
		  	<div data="基本信息">
			  	<div class="title">
			  	    <el-form  label-width="80px">
					  <el-form-item label="类型">
					    <el-select  placeholder="请选择活动区域" size="small" v-model="deviceType" @change="changeType">
					      <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in deviceTypeList" :key="index"></el-option>
					    </el-select>
					  </el-form-item>			  	    	
			  	    </el-form>
			  	</div>			  	
		  	</div>		  	
		  	<div>
		  	   <avue-form :option="options1"  ref="form"  v-model="form" @submit="save">
			      <template slot="menuForm">
                      <el-button @click="dialogVisible = false" icon="el-icon-delete">取 消</el-button>
			      </template> 		  	   	  
		  	   </avue-form>
            </div>
	    </div>
	</el-dialog>	
</template>
<script>
  import {device_type,addOrUpdate,remove} from "@/api/dust/highEquipment";	
  import {options} from "./js/option"
  export default {
    data() {
      return {
      	deviceTypeList:[],
      	deviceType:null, // 储存当前选中的设备
        dialogVisible: false, 
        options1:options.option1,
        form:{
        	deviceName:'',
        	ownerName:'',
        	deviceType:'',
        	deviceId:'',
        	contractRecordCode:'',
        	limitWeight:'',
        	limitTorque:'',
        	limitHeight:'',
        	limitMagnitude:'',        	
        	siteInfoId:'',
        	staffId:'',
        	posx:'',
        	posy:'',
        	siteInfoName:''
        }
      }      
    },
    mounted(){	
      this.init()
    },
    methods: {
      showWin(siteInfoId,siteInfoName){      	
      	this.dialogVisible=true
      	this.$nextTick(function(){
      		this.$refs.form.clearValidate()
      		this.$refs.form.resetForm()
	        this.form.siteInfoId=siteInfoId
	      	this.form.siteInfoName=siteInfoName         		
      	})          	
      },
      changeType(val){     
      	this.deviceType=val
  		var limitWeight =this.findObject(this.options1.column,'limitWeight')
  		var limitTorque =this.findObject(this.options1.column,'limitTorque')
  		var limitHeight =this.findObject(this.options1.column,'limitHeight')
  		var limitMagnitude =this.findObject(this.options1.column,'limitMagnitude')      	
      	if(val==1){     
      		limitWeight.display=true
      		limitTorque.display=true
      		limitHeight.display=true
      		limitMagnitude.display=true      		
      	}else if(val==2){
      		limitWeight.display=true
      		limitTorque.display=false
      		limitHeight.display=false
      		limitMagnitude.display=false
      	}else if(val==3){
      		limitWeight.display=false
      		limitTorque.display=false
      		limitHeight.display=false
      		limitMagnitude.display=false      		
      	}
      },
      init(){
        device_type().then(res => {
          this.deviceTypeList=res.data.data      
          this.deviceType=this.deviceTypeList[0].dictKey            
        });       	
      },
      save(form,done){
      	let row;
        row=this.form
      	row.type=this.deviceType      	
        addOrUpdate(row).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
          this.dialogVisible=false	
          this.$emit('reload')          
        }, error => {
          window.console.log(error);
          loading();
        });      	
      }
    }
  };
</script>

<style scoped="" lang="scss">
$color: #333; 
$fontSizeTitle: 16px; 
.title{
	color:$color;
	font-size: $fontSizeTitle;
}
.title2{padding-top: 20px;}
.input_wrap{padding:10px 15px 0px 0;
   .input_title{margin-bottom: 10px;}
}
.input_wrap2{display: flex;align-items: center;padding-top: 10px;justify-content: center;}
.tips{margin-bottom: 20px;padding-left: 10px;}
</style>